<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奥运五环</title>
</head>
<body>
    <div>
        <p>第一个五环</p>
        <canvas id="myCanvas" width="400px" height="200px" style="border: 1px solid #c3c3c3">
            糟糕 你的浏览器 我还搞不懂也？
        </canvas>
    </div>
    <div>

    </div>

<script>
    // 绘制一个圆
    let drawSrc = function (param, ctx) {
        let start = param.startPi || 0;
        let end = param.endPi || 2;
        console.log(start);
        ctx.strokeStyle = param.color;
        // 清空子路径列表开始一个新路径的方法。
        ctx.beginPath();
        // 画圆弧
        ctx.arc(param.x, param.y, param.radius, Math.PI * start, Math.PI * end, false);
        // 沿着当前路径绘制或画一条直线。
        ctx.stroke();
    }

    let one = function () {
        let myCanvas = document.getElementById("myCanvas");
        let ctx = myCanvas.getContext("2d");
        ctx.lineWidth = 3;
        let data = [
            {x: 70, y:70, color: "#163b62", radius: 40},
            {x: 160, y:70, color: "#000000", radius: 40},
            {x: 250, y:70, color: "#bf0628", radius: 40},
            {x: 110, y:110, color: "#ebc41f", radius: 40},
            {x: 200, y:110, color: "#198e4a", radius: 40},

            // 这里画圆弧
            {x: 70, y:70, color: "#163b62", radius: 40, startPi: 1.9, endPi: 2.1},
            {x: 160, y:70, color: "#000000", radius: 40, startPi: 0.9, endPi: 2.1},
            {x: 250, y:70, color: "#bf0628", radius: 40, startPi: 0.9, endPi: 1.1},
        ];
        for (let i = 0; i < data.length; i++) {
            drawSrc(data[i], ctx);
        }
    }
    one();
</script>
</body>
</html>